ওয়েবসাইট তৈরিতে HTML এর যথাযথ প্রয়োগ,পদ্ধতি ও ব্যবহার

Alt text

HTML বলতে কি বুঝেন এবং এর আবিষ্কারক

HTML বলতে Hyper Text Markeup Language কে বুঝায়। এটি World Wide Web বা www এ  তথ্য আদান - প্রদান করা হয়। ইহা ব্রাউজারে তথ্য প্রদর্শন বা ওয়েব পেজে তথ্য উপস্থাপন ও ফরমেট করার জন্য প্রোগ্রামার গণ ব্যবহার করেন। HTML সত্যিকার অর্থে প্রোগ্রামিং ল্যাঙ্গুয়েজ নয়। এটি HTML এর মার্ক আপ language.HTML ফাইলের এক্সটেনশন .html অথবা.htm.

এটির সাহায্যে ওয়েব পেজে টেক্সট,অডিও, ভিডিও, গ্রাফিক্স বা অ্যানিমেশনকে সুন্দর ভাবে সাজানো বা ফরমেট করা হয়। HTML এর ফাইল ওয়েব পেজ নামে ব্যবহৃত হয়।

HTMLএর আবিষ্কারক

১৯৯০-১৯৯১ সালে সুইজারল্যান্ডের জেনেভায় অবস্থিত CERN ল্যাবে কাজ করার সময় টিম বার্নারস-লি(Tim Berners- Lee) এই HTML আবিষ্কার করেন।

এর সাহায্যে ওয়েব সাইটে কি কি কাজ করা হয়

এর সাহায্যে ওয়েব সাইটে যা যা তৈরি করা যায় টাইটেল বা শিরোনাম বা হেডিং, প্যারাগ্রাফ, ইমেজ, ভিডিও, লিংক, লিস্ট, বাটন,টেবিল ইত্যাদি তৈরি করা যায়।

একটি html পেজের বেসিক যে স্ট্রাকচার হতে পারে। যেমন ধরুন:

<!DOCTYPE html>

<html>

<head>

<title> একটি পেজের টাইটেল </title>

</head>

<body>

<h1> HTML এর যথাযথ ব্যবহার ও প্রয়োগ </h1>

<p> HTML সম্পর্কে একটি অনুচ্ছেদ </p></body>

</html> 

HTML এর ৩ টি প্রয়োজনীয় বস্তু 

HTML এ সাধারণত তিন ধরনের ভাষা ব্যবহার করা হয় যেমন Attribute (এট্রিবিউট)(Element) এলিমেন্ট বা উপাদান ও (Tag) ট্যাগ ।

প্রথমে এট্রিবিউট হল এলিমেন্টের একটি অংশ যা এলেমেন্টের কার্যকর ক্ষমতা বাড়িয়ে দেয়। এলিমেন্ট হল একটি HTML এর উপাদানের ভিতরে আরেকটি এলিমেন্ট থাকতে পারে। আর HTML কিছু ডকুমেন্ট ব্যবহার করে যাদের কে Marke-up বল হয় সেগুলোই Tag (ট্যাগ)।

HTML TAG গুলো বিস্তারিত আলোচিত হলো

আপনার title (টাইটেল) অবশ্যই ইউনিক হতে হবে। কোন কিছু লেখার সময় আপনার meta description (মেটা ডেসক্রিপশন) ১৫০ থেকে ১৬০ অক্ষরের মধ্যে লিখতে হবে। মেটা ডাটা,টাইটেল ,CSS সংরক্ষণ করার জন্য head হেড ট্যাগ ব্যবহার করা হয়।

কোন ওয়েব পেজের যে সমস্ত লেখা গুলো দেখতে পাওয়া যায় ,সেগুলো সাধারণত body ট্যাগ এর মাধ্যমে লিখা হয়।

ওয়েব সাইটে প্রথমে কোন প্যারাগ্রাফ এর শিরোনাম দেখার জন্য ছয় ধরনের হেডিং ট্যাগ ব্যবহার করা হয় এগুলো হলো-হেডিং ওয়ান হেডিং টু ,হেডিং থ্রি, হেডিং ফোর, হেডিং ফাইভ, হেডিং সিক্স।

Empty Tag (ট্যাগ)

যে ট্যাগের কোন  ক্লোজিং  ট্যাগ নেই সেগুলোকে Empty Tag (ট্যাগ) বলে। যেমন-

<br>, <hr>,<img>।

Container Tag (কন্টেইনার ট্যাগ) 

যে ট্যাগের  ওপেনিং ও ক্লোজিং ট্যাগ থাকে সেগুলোকে  কন্টেইনার ট্যাগ বলে। যেমন-

 <p>Text</p>

<h1>Title</h1> ।

Bold Tag (বোল্ড টেগ)

ওয়েব সাইট এর লেখাকে বোল্ড করার জন্য যে Tag ব্যবহার হয় তাকে Bold Tag (বোল্ড টেগ) বলে । যেমন-

<b>Text</b>

<strong>Text</strong>।

Italic Tag (ইটালিক ট্যাগ) 

কোন লেখা কে Italic করার জন্য  যে টেক ট্যাগ ব্যবহার করা হয় তা হল Italic Tag (ইটালিক ট্যাগ)।

<i>Text</i>
<em>Text</em>।

লিঙ্কিং ট্যাগ (Linking Tag)

কোন ওয়েব সাইটের লিংক এর সাথে Linking করার জন্য যে ট্যাগ ব্যবহার করা হয় তা হল লিঙ্কিং ট্যাগ।যেমন-

<a

href="https://ukrtechno.blogspot.com">Ukr Techno</a>

Image যোগ করার জন্য যে ট্যাগ ব্যবহার করা  হয় তাহলো এরূপ

<img src="image.jpg"> ।

Image tag এর গুরুত্বপূর্ণ attribute (এট্রিবুট) হল এগুলো 

src, alt, width, height.

HTML এ সাধারণত ৩ প্রকার List বা তালিকা ব্যবহার করা হয়।

⇒ Ordered List

⇒ Unordered List

⇒ Description List

Ordered List সাধারণত এরকম
<ol>
<li>Item </li>
<li>Item /li>
</ol> ।
      
Unordered List এভাবে ব্যবহার করা হয়
<ul>
<li>Item </li>
<li>Item 2</li>
</ul> ।

Description List কোন পদের বর্ণনা সম্বলিত লিস্ট: 
<dl>
<dt ----- </dt>
<dd> ----- </dd>
</dl>।

Table তৈরি করার জন্য যে ট্যাগ ব্যবহার করা হয় সেগুলো হলো:

<table> 
<tr> 
<td>Data</td> 
</tr> 
</table> 

Table তৈরিতে আরো একটি গুরুত্বপূর্ণ ট্যাগ হলো:

  <table> <tr> <td> <th> ।

Form  তৈরিতে যে ট্যাগ করা হয় সেগুলো হলো:
<form> 

<input type="text"> 

</form> ।

HTML এর সুবিধা গুলো কি কি

১। এর সাহায্যে ওয়েব পেজের ট্যামপ্লেট বা থিম তৈরি করা যায়।

২। আবার এর সাহায্যে ওয়েব সাইটের আকর্ষণীয় ডিজাইন তৈরি করা যায়।

৩। ওয়েবসাইটের Landing Page তৈরি করা হয়।

৪। AdSense Ready Blog Structure বানানো হয়।

৫। Freelancing কাজ শুরু করে মাসে মাসে টাকা করা যায়।
৬। ব্যানার,ওয়েব ফর্ম ডিজাইন করা যায়।

৭। থার্ড পার্টি অ্যাপ্লিকেশন গুলো ব্যবহার করে ভিডিও বা অডিও যুক্ত করা যায়।

৮। ক্যানভাস ফিচারের সাহায্যে আকর্ষণীয় টু ডাইমেনশনাল ডুইং এর কাজ করা যায়।

৯।জিও লোকেশন ব্যবহার করে ভিজিটররা ওয়েব এপ্লিকেশনের মাধ্যমে তাদের অবস্থান জেনে নিয়ে শেয়ার করতে পারেন।

১০। বিভিন্ন ধরনের ফরমেট করা হয়।

শেষ কথা

বর্তমান তথ্য-প্রযুক্তি ও ডিজিটাল যুগে HTML ছাড়া কোন কিছু ভাবাই যায় না। এর মাধ্যমে ওয়েবসাইট গঠন বা কাঠামো , ডিজাইন ইত্যাদি সুন্দর ভাবেই আকর্ষণীয় করা যায় । এমনকি ওয়েব পেজের ভিতরে লেখা ছবি লিংক ,টেবিল, ফরম এবং অন্যান্য উপাদান HTML এর মাধ্যমেই সাজানো হয়।

ইহা নতুন ওয়েব সাইট ডেভলপার দের শেখার এক প্রথম ধাপ। এতে থাকা ওয়েব পেজের শিরোনাম ,অনুচ্ছেদ, ছবি, অডিও ,ভিডিও এবং লিংক যুক্ত করা হয় । এর দ্বারা কাজ করে ওয়েব সাইট সুন্দর ও আকর্ষণীয়  করা যায়। তাছাড়া বিশেষ করে header, nav, section, article এবং footer এর মতো Semantic Tag ব্যবহার করে ওয়েব সাইট এর সার্চ ইঞ্জিন অপটিমাইজেশন (SEO), responsive ও ফ্রেন্ডলি করানো হয়।

এতে Meta Tag, Title Tag, Heading Tag (H1–H6), Image Alt Attribute এবং Structured ব্যবহারের ফলে কনটেন্ট কে আকর্ষণীয় করে তোলে, ভিউওয়ারদের কাছে এটা অত্যন্ত আকর্ষণীয় হয়ে যায় । এতে অর্গানিক বা জৈব ট্রাফিক বেড়ে যায় আবার রেঙ্কিং এর ক্ষেত্রেও একজন ডেভেলপারকে সফলতার স্বর্ণ শিখরে পৌঁছে দেয়। এতে কোন সন্দেহ নাই। তাই এর এলিমেন্ট এবং ট্যাগগুলো ব্যবহার করা অত্যন্ত প্রয়োজন ।

পরিশেষে এটাই বলা যায় যে, HTML হল ওয়েব ডেভেলপমেন্টের শক্তি, যা দিয়ে সহজেই একজন ওয়েব ডেভেলপার ডিজাইন, ব্লগিং ,ডিজিটাল মার্কেটিং ইত্যাদি জগতে প্রবেশ করে। এই HTML ওয়েব প্রযুক্তি শেখার এক শক্ত ভিত্তি , এতে কোন সন্দেহ নেই । তাই একজন সফল ওয়েব ডেভেলপার এর জীবনে HTML শেখা অত্যন্ত প্রয়োজনীয় এবং বাস্তব পদক্ষেপ।লেখার জন্য আপনাকে ধন্যবাদ জানাই।

Bangla One Tech-প্রযুক্তি এবং অনলাইন আয়ের টিপস

আমি SEO, SE, 100% Post Indexing, Technology, Domain, Hosting, Template , Txt and Cname Record, SSL Certificate, Https, Design, HTML, Digital Marketimg, CPA Marketing , Adsense Approval, Income Money, Facebook Reels, Facebook and YouTube Video Editing and Posting, Recent News and Event ইত্যাদি নিয়ে আলোচনা ও লেখালেখি করে প্রশ্ন দিয়ে এগুলোর সমাধান দিই।

Post a Comment (0)
Previous Post Next Post